<template>
  <div>
    <div class="table_resource" style="text-align: center">
      <el-table
        :data="showTable"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        stripe
      >
        <el-table-column prop="depId" label="部门编号" width="120">
        </el-table-column>
        <el-table-column prop="depName" label="部门名称">
        </el-table-column>
        <el-table-column fixed="right" width="400">
          <template slot="header">
            <input
              v-model="keywords"
              placeholder="请输入部门编号"
              class="el-input__inner"
            />
          </template>
          <template slot-scope="scope">
            <el-switch
              @change="handleDep(scope.$index, scope.row)"
              v-model="scope.row.depAuth"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="resource-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="filterDataShow.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keywords: "", // 搜索的关键字
      filterDataShow: [], //储存符合条件的数据
      tableData: [],
      pagesize: 10,
      currentPage: 1,
    };
  },
  mounted() {
    this.getDataAxios();
  },
  methods: {
    getDataAxios() {
      let that = this;
      this.$api.department
        .getSchoolDepartments({})
        .then(function (response) {
          console.log(response);
          that.tableData = response.data.data.departments;
          that.searchResource();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //查询
    searchResource() {
      this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
      let filterKeywords = this.keywords.trim();
      let filerReasource = this.tableData.filter((item) => {
        //过滤全部数据
        if (item.depName.includes(filterKeywords)) {
          return item;
        }
      });
      this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
    },
    onSubmit() {},
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleDep(index, row) {
      let _that = this;
      this.$api.department
        .authDepartment({ dep_id: row.depId, dep_name: row.depName })
        .then(function (response) {
          console.log(response)
          if(response.data.code == 200){
            _that.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
          }
        });
    },
  },
  watch: {
    //监听搜索框内容，当搜索框内容发生变化时调用searchResource方法
    keywords() {
      this.searchResource();
    },
  },
  computed: {
    //showTable计算属性通过slice方法计算表格当前应显示的数据
    showTable() {
      return this.filterDataShow.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },
  },
};
</script>
<style scoped>
#find {
  width: 400px;
  margin-bottom: 30px;
}
</style>
